<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript">
        //打印列表
        $(function () {
            $.ajax({
                url:"shoppinginfo",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        str+="<tr><td><dd id='b_name'>"+row[0]+"</dd></td><td>"+row[1]+"</td><td>"+row[2]+"</td><td><rich id='rich' >"+row[3]+
                            "</rich></td><td><input type='text' id='num'></td>"+
                            "<td><a href='/Delbuy?bname="+row[0]+"' class='layui-btn layui-btn-radius layui-btn-danger'><span class='layui-icon layui-icon-delete'></span>删除</a></td></tr>"
                        $("#tbody").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        });
        function Total() {
            var r=new Array();
            var n=new Array();
            var s=""
            var sum=0
            for(var i=0;i<document.getElementsByTagName("input").length;i++){
                if(document.getElementsByTagName("rich")[i].id=="rich")
                    r[i]=document.getElementsByTagName("rich")[i].innerHTML
                if(document.getElementsByTagName("input")[i].id=="num")
                    n[i]=document.getElementsByTagName("input")[i].value
                var a=Number(r[i])
                var b=Number(n[i])
                var c=a*b
                sum+=c
                s+="<tr><td><span class='layui-btn layui-btn-normal'>"+c.toString()+"</span></td></tr>"
            }
            $("#n_rich").html(s);
            $("#total").html(sum);
        }
        function Buy() {
            var b=new Array();
            var n=new Array();
            for(var i=0;i<document.getElementsByTagName("input").length;i++){
                if(document.getElementsByTagName("input")[i].id=="num")
                    n[i]=document.getElementsByTagName("input")[i].value
                if(document.getElementsByTagName("dd")[i].id=="b_name")
                    b[i]=document.getElementsByTagName("dd")[i].innerHTML
                $.ajax({
                    url:"buybook" ,
                    method: "post",
                    data:{
                        bname:b[i],
                        number:n[i]
                    },
                    dataType: 'text',
                    success:function(result) {
                        if(result==1){
                            layer.msg("购买成功", {
                                time: 2000,
                                icon: 1
                            });}
                        else
                            alert(result)
                    },
                    error:function (e){
                        layer.msg("连接错误", {
                            time: 2000,
                            icon: 2
                        });
                    }
                });
            }
        }
        function re() {
            window.location.href = "/ShoppingCart"
        }
    </script>
</head>
<body>
<div class="layui-elem-quote">
购物车
</div>
<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<div class="layui-row">
    <div class="layui-col-md10">
        <table class="layui-table" id="tab">
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>类别</th>
                <th>单价</th>
                <th>选择数量</th>
                <th>操作</th>
            </tr>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
    <div class="layui-col-md2">
        <table class="layui-table" id="tab">
            <tr>
                <th>小计</th>
            </tr>
            <tbody id="n_rich">
            </tbody>
        </table>
    </div>
</div>
<br>
<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<br>
<div class="layui-row">
    <div class="layui-col-md3" align="center">
        <div class="layui-btn layui-btn-radius layui-btn-danger">
            <a href="delshop" ><span class="layui-icon layui-icon-fonts-clear"></span>清空购物车</a>
        </div>
    </div>
    <div class="layui-col-md3" align="center">
        <div class="layui-btn layui-btn-radius layui-btn-warm">
            <a href="javascript:Buy()" ><span class="layui-icon layui-icon-ok-circle"></span>购买</a>
        </div>
    </div>
    <div class="layui-col-md4" align="center">
        <div class="layui-btn layui-btn-radius layui-btn-warm">
            <a href="javascript:re()" ><span class="layui-icon layui-icon-refresh"></span>刷新</a>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-btn layui-btn-radius layui-btn-normal">
            <p><a href="javascript:Total()">计算总价:</a><label id="total" class="layui-font-20"></label>￥</p>
        </div>
    </div>
</div>

<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</body>
</html>